<template>
  <div :gutter="5" class="header-float">
    <!-- 搜索 -->
    <div class="nav-item">
      <a class="nav-btn">
        <i class="el-icon-search el-icon-margin"></i>
        <span @click="searchDialog = !searchDialog">搜索</span>
      </a>
      <!-- 搜索框 -->
      <SearchBlog
        :searchDialog="searchDialog"
        @closeSearch="closeSearch"
      ></SearchBlog>
    </div>
    <!-- 首页 -->
    <div class="nav-item">
      <div class="" @click="toIndex">
        <a class="nav-btn">
          <i class="el-icon-s-home el-icon-margin"></i>
          <span>首页</span>
        </a>
      </div>
    </div>
    <!-- 聊天室 -->
    <div class="nav-item chatroom">
      <a class="nav-btn">
        <i class="el-icon-chat-dot-round el-icon-margin"></i>
        <span>聊天室</span>
      </a>
      <ul class="user-submenu">
        <li>
          <a type="text" @click="chatCheckLoginStatus('打开聊天室', 0)">
            <i class="el-icon-user" />
            公共聊天室
          </a>
        </li>
        <li>
          <a type="text" @click="chatCheckLoginStatus('打开聊天室', 1)">
            <i class="el-icon-user-solid" />
            私人聊天室</a
          >
        </li>
      </ul>
      <PublicChatRoom
        :publicChatRoomVisible="publicChatRoomVisible"
        @closeChatRoom="closeChatRoom"
        @sendPublicMsg="sendPublicMsg"
        :publicChatRoom="publicChatRoom"
      />
      <PrivateChatRoom
        :privateChatRoomVisible="privateChatRoomVisible"
        @closeChatRoom="closeChatRoom"
        @sendPrivateMsg="sendPrivateMsg"
        :privateChatRoom="privateChatRoom"
      ></PrivateChatRoom>
    </div>
    <!-- 类别 -->
    <div class="nav-item">
      <div class="category-btn">
        <a class="nav-btn">
          <i class="el-icon-s-operation el-icon-margin"></i>
          <span>类别</span>
        </a>

        <ul class="category-submenu">
          <li>
            <router-link to="/showClassify" style="color: #606266">
              <i class="el-icon-s-grid" />
              分类
            </router-link>
          </li>
          <li>
            <router-link to="/showTag">
              <i class="el-icon-s-flag" />
              标签
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <!-- 归档 -->
    <div class="nav-item">
      <router-link to="/archivesPage">
        <a class="nav-btn">
          <i class="el-icon-files el-icon-margin"></i>
          <span>归档</span>
        </a>
      </router-link>
    </div>
    <!-- 留言 -->
    <div class="nav-item">
      <router-link to="/message">
        <div class="messageBtn">
          <a class="nav-btn">
            <i class="el-icon-s-comment el-icon-margin"></i>
            <span>留言</span>
          </a>
        </div>
      </router-link>
    </div>
    <!-- 登录框 -->
    <div class="nav-item">
      <el-button type="text" v-if="!isLogin" @click="visible = !visible"
        >登录</el-button
      >
      <!-- 用户登录后的信息展示 -->
      <div v-if="isLogin" class="user-btn">
        <span class="el-dropdown-link">
          <img
            :src="getUserAvatar"
            style="width: 30px; height: 30px; border-radius: 50%"
          />
        </span>

        <ul class="user-submenu" style="margin-top: 8px !important">
          <li>
            <router-link to="/welcome" style="color: #606266">
              <i class="el-icon-user-solid" />
              个人中心
            </router-link>
          </li>
          <li>
            <a type="text" @click="sendBlogVisible = !sendBlogVisible">
              <i class="el-icon-edit" />
              发布博客</a
            >
          </li>
          <li>
            <!-- <sendBlog :sendBlogVisible="sendBlogVisible"></sendBlog> -->
            <a @click="logOutUser">
              <i class="el-icon-bottom" />
              退出登录
            </a>
          </li>
        </ul>
        <!-- md 发布博客窗口-->
        <el-dialog
          title=""
          :visible.sync="sendBlogVisible"
          width="60%"
          :modal="false"
          :before-close="closeSendBlog"
          :close-on-click-modal="false"
          append-to-body
        >
          <sendBlogPost :sendBlogVisible.sync="sendBlogVisible" />
        </el-dialog>
      </div>

      <!-- 用户密码输入框 -->
      <ShowLoginVue
        :showVisible="visible"
        @closeLogin="closeLogin"
      ></ShowLoginVue>
    </div>
  </div>
</template>

<script>
import PublicChatRoom from "../../views/chatRoom/PublicChatRoom.vue";
import PrivateChatRoom from "../../views/chatRoom/PrivateChatRoom.vue";
import SearchBlog from "@/views/blog/SearchBlog.vue";
import BlogCommonApi from "@/api/BlogCommonApi";
import getSession from "@/utils/getSession";
import { defineComponent } from "vue";
import sendBlogPost from "@/components/layout/SendBlogPost.vue";
import ShowLoginVue from "@/views/login/ShowLogin.vue";
const blogCommonApi = new BlogCommonApi();
const sessionUtils = new getSession();
export default defineComponent({
  name: "headerNavsBar",
  props: {
    // 存放父组件传递过来的数据 (在父组件中使用自定义标签传递的数据)
  },
  components: {
    sendBlogPost,
    ShowLoginVue,
    SearchBlog,
    PublicChatRoom,
    PrivateChatRoom,
  },
  data() {
    return {
      // 显示登录还是注册
      visible: false,
      publicChatRoomVisible: false,
      privateChatRoomVisible: false,
      sendBlogVisible: false,
      showLoginForm: true,
      showRegistryForm: false,
      article: {
        content: "",
      },
      isFirstChatRoom: true,
      searchDialog: false,
      privateChatRoom: [],
      publicChatRoom: [],
    };
  },
  computed: {
    getUserAvatar() {
      return this.$store.state.userInfo.loginUrlAvatar;
    },
    isLogin() {
      return this.$store.state.isLogin;
    },
  },
  methods: {
    // 路由到登录
    routeLogin(data) {
      this.$router.push({
        path: "/login",
        params: data,
      });
    },
    // toMessage() {
    //   this.$router.push("./message");
    // },

    // 私人聊天室发送消息
    sendPrivateMsg(data) {
      this.webSocket.send(JSON.stringify(data));
    },

    //公共聊天室发送消息
    sendPublicMsg(data) {
      this.webSocket.send(JSON.stringify(data));
    },
    // 检查是否登录
    verifyLogin() {
      return this.$store.state.isLogin;
    },
    // 关闭聊天室窗口
    closeChatRoom(data) {
      this.publicChatRoomVisible = data;
      this.privateChatRoomVisible = data;
    },
    // 关闭登录弹窗
    closeLogin(data) {
      this.visible = data;
    },
    //关闭搜索弹窗
    closeSearch(data) {
      this.searchDialog = data;
    },
    // 登录注册的转换
    showLoginRegistryColor(num) {
      if (num === 0) {
        this.showLoginForm = true;
        this.showRegistryForm = false;
      } else {
        this.showRegistryForm = true;
        this.showLoginForm = false;
      }
    },
    // 关闭发送博客的弹窗
    closeSendBlog() {
      this.sendBlogVisible = false;
      this.$message("不发布博客了吗? 发布博客可以让大家知道你的想法");
    },
    // 退出登录
    logOutUser() {
      blogCommonApi.logOutUser().then((res) => {
        if (res.code === 205) {
          sessionUtils.delStorage();
          this.$store.commit("logout");
          this.$message({
            type: "success",
            message: "退出登录成功,期待下次再来zBlog",
          });
          localStorage.setItem("store", JSON.stringify(this.$store.state));
        }
      });
      this.$router.push({
        path: "/",
      });
    },
    // 检查打开聊天室时是否登录
    chatCheckLoginStatus(data, type) {
      if (!this.$store.state.isLogin) {
        this.$confirm("登录后才能" + data + "哦,是否登录呢?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.visible = true;
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "你选择不登录",
            });
            return false;
          });
      } else if (type === 0) {
        this.publicChatRoomVisible = true;
      } else {
        this.privateChatRoomVisible = true;
      }
    },
    // 路由到首页
    toIndex() {
      this.$router.push({
        path: "/",
      });
    },

    // 连接websocket
    openSocket() {
      if (typeof WebSocket === undefined) {
        this.$message.error("您的浏览器不支持聊天室功能哦,请更换浏览器");
      } else {
        // 初始化websocket

        let url = "ws://localhost:9999/wsBlog/" + this.userInfo.uid;
        if (this.webSocket != null) {
          this.webSocket.close();
        }
        this.webSocket = new WebSocket(url);
        //初始化函数

        // 连接事件
        this.webSocket.onopen = () => {};

        //
        this.webSocket.onclose = () => {};

        this.webSocket.onerror = () => {
          console.log("websocket发生了错误");
        };
        //获取后端发送过来的消息信息, 进行处理
        this.webSocket.onmessage = (msg) => {
          // 根据收到的消息信息分发 0 群聊消息或上线下线消息, 1 单独消息
          if (JSON.parse(msg.data).type === 1) {
            this.privateChatRoom = msg;
          } else {
            this.publicChatRoom = msg;
          }
        };
      }
    },
  },
  watch: {},
  mounted() {
    // 注册滚动事件
    window.addEventListener("scroll", this.watchScroll);

    // 初次在导航栏加载的时候 进行保存数据 实现开启新窗口都有登录信息
    if (localStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(localStorage.getItem("store"))
        )
      );
    }

    if (this.$store.state.isLogin) {
      this.userInfo = this.$store.state.userInfo;
      this.openSocket();
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.watchScroll);
  },
});
</script>

<style scoped lang="scss">
* {
  user-select: none;
}
.header-float {
  display: flex;
  position: absolute;
  top: 10px;
  right: 40px;
  //position: sticky;
  font-size: 14px;
  color: whitesmoke;
  z-index: 9;
  //cursor: pointer !important;
}

.nav-item {
  display: inline-block;
  position: relative;
  padding: 15px;
  cursor: pointer;
  .nav-btn {
    color: #fff;
    text-decoration: none;
  }
  .nav-btn:hover {
    border-bottom: 2px solid #80c8f8;
    padding: 0 0 6px 0;
    transition: all 0.3s ease-in-out;
  }
}
.el-icon-margin {
  margin-right: 5px;
}
.v-model {
  width: 0;
  height: 0;
}

.el-button--text {
  color: whitesmoke;
}

.el-button {
  padding: 0;
}

// 登录
.login-welcome {
  display: flex;
  width: 100%;
  font-size: 20px;
  .login-welcome-left {
    justify-content: flex-start;
    display: flex;
    align-items: center;
  }
  .login-welcome-right {
    flex: 1;
    margin-right: 20px;
    justify-content: flex-end;
    display: flex;
    align-items: center;
  }
}

.user-item {
  padding: 20px;
  font-size: 16px;

  .user-tabs {
    display: flex;
    cursor: pointer;
  }

  .user-login-button {
    padding: 8px;
  }

  .user-registry-button {
    margin-left: 15px;
    padding: 8px;
  }
  .login-registry-color {
    padding-bottom: 5px;
    color: #18a058;
    border-bottom: 2px solid #18a058;
  }
}
::v-deep .el-dialog__body {
  padding: 20px 45px 20px 20px;
}
::v-deep .el-dialog__header {
  display: flex;
}

// md窗口
.editor {
  width: 100%;
  height: 100%;
}

@keyframes submenu {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: translateY(0);
  }
}
.user-btn {
  position: relative;
}
.user-btn:hover .user-submenu {
  display: block;
  animation: submenu 0.3s 0.1s ease both;
}

.chatroom:hover .user-submenu {
  display: block;
  animation: submenu 0.3s 0.1s ease both;
}
.user-submenu {
  position: absolute;
  display: none;
  right: 0;
  width: max-content;
  margin-top: 10px;
  box-shadow: 0 5px 20px -4px rgba(0, 0, 0, 0.5);
  background-color: #fff;
  animation: submenu 0.3s 0.1s ease both;
  a {
    line-height: 2;
    color: #4c4948 !important;
    text-shadow: none;
    display: block;
    padding: 6px 14px;
  }

  li:hover {
    background: #87cefa;
    animation: submenu 0.3s 0.1s ease both;
  }
}
.user-submenu:before {
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 20px;
  content: "";
}

.category-submenu {
  position: absolute;
  display: none;
  top: 22px;
  right: 0;
  background-color: #fff;
  margin-top: 20px;
  box-shadow: 0 5px 20px -4px rgba(0, 0, 0, 0.5);
  animation: submenu 0.3s 0.1s ease both;
  a {
    line-height: 2;
    color: #4c4948 !important;
    text-shadow: none;
    display: block;
    padding: 6px 11px;
  }
  li:hover {
    background: #87cefa;
    animation: submenu 0.3s 0.1s ease both;
  }
}
.category-btn:hover > .category-submenu {
  display: block;
  transition: all 0.6s linear;
}
.router-link-active {
  //点击时去掉下划线
  text-decoration: none;
}
.messageBtn {
  color: #fff;
}
a {
  text-decoration: none; //去掉原有链接文字下划线
}
</style>
